<template>
  <div class="form-renderer">
    <el-form
      ref="formRef"
      :model="formData"
      :label-width="labelWidth"
      :label-position="labelPosition">
      <template v-for="item in items" :key="item.field">
        <el-form-item
          :label="item.label"
          :prop="item.field"
          :rules="item.required ? [{ required: true, message: `请输入${item.label}`, trigger: 'blur' }] : []">
          <!-- 输入框 -->
          <el-input
            v-if="item.type === 'input'"
            v-model="formData[item.field]"
            :placeholder="`请输入${item.label}`" />
          
          <!-- 下拉框 -->
          <el-select
            v-else-if="item.type === 'select'"
            v-model="formData[item.field]"
            :placeholder="`请选择${item.label}`">
            <el-option
              v-for="option in item.options"
              :key="option.value"
              :label="option.label"
              :value="option.value" />
          </el-select>
          
          <!-- 日期选择器 -->
          <el-date-picker
            v-else-if="item.type === 'date'"
            v-model="formData[item.field]"
            type="date"
            :placeholder="`请选择${item.label}`" />
          
          <!-- 单选框组 -->
          <el-radio-group
            v-else-if="item.type === 'radio'"
            v-model="formData[item.field]">
            <el-radio
              v-for="option in item.options"
              :key="option.value"
              :label="option.value">
              {{ option.label }}
            </el-radio>
          </el-radio-group>
          
          <!-- 多选框组 -->
          <el-checkbox-group
            v-else-if="item.type === 'checkbox'"
            v-model="formData[item.field]">
            <el-checkbox
              v-for="option in item.options"
              :key="option.value"
              :label="option.value">
              {{ option.label }}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </template>

      <!-- 表单按钮 -->
      <el-form-item v-if="showSubmit || showReset">
        <el-button
          v-if="showSubmit"
          type="primary"
          @click="handleSubmit">
          提交
        </el-button>
        <el-button
          v-if="showReset"
          @click="handleReset">
          重置
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const props = defineProps({
  labelWidth: {
    type: String,
    default: '100px'
  },
  labelPosition: {
    type: String,
    default: 'right'
  },
  items: {
    type: Array,
    default: () => []
  },
  showSubmit: {
    type: Boolean,
    default: true
  },
  showReset: {
    type: Boolean,
    default: true
  }
})

const emit = defineEmits(['submit', 'reset'])

const formRef = ref(null)
const formData = ref({})

// 提交表单
const handleSubmit = async () => {
  if (!formRef.value) return
  
  try {
    await formRef.value.validate()
    emit('submit', formData.value)
  } catch (error) {
    console.error('表单验证失败:', error)
  }
}

// 重置表单
const handleReset = () => {
  if (formRef.value) {
    formRef.value.resetFields()
  }
  emit('reset')
}
</script> 